<template>
  <div class="app-container">
    <div class="top-bar-container">
      <el-row>
        <el-col :span="16">
          <div class="search-container">
            <search-form @search-submit="getPermissionList">
              <el-breadcrumb separator="/" style="margin-right: 10px;">
                <el-breadcrumb-item :to="{ path: '/permission/list', query: { parentId: 0 }}">顶层</el-breadcrumb-item>
                <el-breadcrumb-item
                  v-for="item in ancestors"
                  :key="item.id"
                  :to="{ path: '/permission/list', query: { parentId: item.id }}"
                >{{ item.name }}
                </el-breadcrumb-item>
              </el-breadcrumb>
              <search-input v-model="listQuery.id" placeholder="ID" />
              <search-select-dict v-model="listQuery.visibleStatus" :dict="yesNoStatusList" placeholder="可见" />
            </search-form>
          </div>
        </el-col>
        <el-col :span="8">
          <el-row type="flex" justify="end">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="handleCreatePermission">新增权限
            </el-button>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <el-table v-loading="listLoading" :data="list" border fit stripe highlight-current-row>
      <el-table-column align="center" label="ID">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="名称">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="描述">
        <template slot-scope="{row}">
          <span>{{ row.description }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="资源">
        <template slot-scope="{row}">
          <span>{{ row.resource }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" align="center" label="可见">
        <template slot-scope="{row}">
          <el-tag :type="row.visibleStatus === 1 ? 'success' : 'info'">
            {{ row.visibleStatus | yesNoStatusFilter }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="页面组件">
        <template slot-scope="{row}">
          <span>{{ row.component }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="组件名称">
        <template slot-scope="{row}">
          <span>{{ row.componentName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="链接">
        <template slot-scope="{row}">
          <span>{{ row.url }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="排序">
        <template slot-scope="{row}">
          <span>{{ row.sortValue }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="创建时间">
        <template slot-scope="{row}">
          <span>{{ row.createdTime }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="更新时间">
        <template slot-scope="{row}">
          <span>{{ row.updatedTime }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        width="280"
      >
        <template slot-scope="scope">
          <el-button-group>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-folder-opened"
              title="查看子权限"
              @click="handleDisplaySubPermissionList(scope.row.id)"
            >子权限
            </el-button>
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-edit"
              title="编辑"
              @click="handleEditPermissionRow(scope.$index)"
            >编辑
            </el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              title="删除"
              @click="handleDeletePermissionRow(scope.$index)"
            >删除
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>

    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getPermissionList"
    />

    <el-dialog
      :title="editForm.id ? '编辑权限' : '新增权限'"
      :visible.sync="dialogEditVisible"
      width="500px"
      @close="handleEditFormDialogClose"
    >
      <el-form
        ref="editForm"
        :model="editForm"
        :rules="editRules"
        class="edit-form"
        autocomplete="on"
        label-position="right"
      >
        <el-form-item prop="name" label="名称" label-width="80px">
          <el-input v-model="editForm.name" />
        </el-form-item>
        <el-form-item prop="description" label="描述" label-position="right" label-width="80px">
          <el-input v-model="editForm.description" />
        </el-form-item>
        <el-form-item prop="resource" label="资源" label-width="80px">
          <el-input v-model="editForm.resource" />
        </el-form-item>
        <el-form-item prop="url" label="页面组件" label-width="80px">
          <el-input v-model="editForm.component" />
        </el-form-item>
        <el-form-item prop="componentName" label="组件名称" label-width="80px">
          <el-input v-model="editForm.componentName" />
        </el-form-item>
        <el-form-item prop="url" label="链接" label-width="80px">
          <el-input v-model="editForm.url" />
        </el-form-item>
        <el-form-item prop="icon" label="icon" label-width="80px">
          <el-input v-model="editForm.icon" />
        </el-form-item>
        <el-form-item prop="visibleStatus" label="可见" label-width="80px">
          <el-select v-model="editForm.visibleStatus" placeholder="请选择">
            <el-option
              v-for="item in yesNoStatusList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="sortValue" label="排序" label-width="80px">
          <el-input v-model="editForm.sortValue" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSavePermission">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination/index.vue'
import SearchForm from '@/components/SearchForm/index.vue'
import SearchInput from '@/components/SearchForm/SearchInput/index.vue'
import SearchSelectDict from '@/components/SearchForm/SearchSelectDict/index.vue'
import {
  adminPermissionAncestors,
  adminPermissionCheckAvailable,
  adminPermissionCreate,
  adminPermissionDelete,
  adminPermissionList,
  adminPermissionUpdate
} from '@/api/rest/admin'
import { yesNoStatusList } from '@/utils/dict'
import { elRequiredRule, elValidateInteger } from '@/utils/el-validator'

const initForm = {
  id: null,
  name: null,
  description: null,
  resource: null,
  component: null,
  componentName: null,
  url: null,
  visibleStatus: null,
  sortValue: 0,
  parentId: null
}

export default {
  name: 'PermissionList',
  components: { SearchInput, Pagination, SearchForm, SearchSelectDict },
  data() {
    const validateResourceAvailable = (rule, value, callback) => {
      return adminPermissionCheckAvailable(value, this.editForm.id).then(resp => {
        if (!resp.data) {
          callback(new Error('权限资源已存在'))
        } else {
          callback()
        }
      })
    }

    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        parentId: 0,
        id: null,
        visibleStatus: null,
        page: 1,
        limit: 10
      },
      editForm: { ...initForm },
      editRules: {
        name: elRequiredRule,
        resource: [elRequiredRule, { trigger: 'blur', validator: validateResourceAvailable }],
        visibleStatus: elRequiredRule,
        sortValue: [{ trigger: 'blur', validator: elValidateInteger }]
      },
      ancestors: null,
      yesNoStatusList: yesNoStatusList,
      dialogEditVisible: false
    }
  },
  watch: {
    $route(to, from) {
      this.listQuery.parentId = this.$route.query.parentId || 0
      initForm.parentId = this.listQuery.parentId
      this.getPermissionList()
    }
  },
  created() {
    this.listQuery.parentId = this.$route.query.parentId || 0
    initForm.parentId = this.listQuery.parentId
    this.getPermissionList()
  },
  methods: {
    getPermissionList() {
      this.listLoading = true
      adminPermissionAncestors(this.listQuery.parentId).then(response => {
        this.ancestors = response.data
      })
      adminPermissionList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleDisplaySubPermissionList(id) {
      this.$router.push({ path: '/permission/list', query: { parentId: id }})
    },
    handleEditPermissionRow(index) {
      this.editForm = { ...this.list[index] }
      this.dialogEditVisible = true
    },
    handleDeletePermissionRow(index) {
      const data = this.list[index]
      this.$confirm('此操作将删除权限, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        adminPermissionDelete(data.id).then(() => {
          this.$message({
            type: 'success',
            message: '删除权限成功'
          })
          this.getPermissionList()
        }).catch(() => {
        })
      })
    },
    handleCreatePermission() {
      this.editForm = { ...initForm }
      this.dialogEditVisible = true
    },
    handleSavePermission() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          if (this.editForm.id) {
            adminPermissionUpdate(this.editForm).then(response => {
              this.$message({
                message: '编辑权限成功',
                type: 'success'
              })
              this.getPermissionList()
              this.dialogEditVisible = false
            })
          } else {
            adminPermissionCreate(this.editForm).then(response => {
              this.$message({
                message: '新增权限成功',
                type: 'success'
              })
              this.getPermissionList()
              this.dialogEditVisible = false
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleEditFormDialogClose() {
      this.$refs.editForm.clearValidate()
    }
  }
}
</script>
<style scoped>
</style>

